<template >
	<div class="page_container">
		<el-row class="el_row">
			<el-col :span="5" class="el_col">
				<el-scrollbar v-if="treeData.length > 0">
					<el-tree
						ref="GRTree"
						node-key="id"
						:data="treeData"
						draggable
						highlight-current
						default-expand-all
						@node-drop="handleDrop"
						@node-click="nodeClick"
						:allow-drop="allowDrop"
						:expand-on-click-node="false"
					>
						<template #default="{ node }">
							<span class="custom-tree-node">
								<span class="coutom-tree-node_label">
									{{ node.label }} <span>({{ node.data.is_role ? '角色' : '组织' }})</span>
								</span>
								<span class="custom-tree-node_btns">
									<el-popover trigger="click" v-if="!node.data.is_role">
										<template #reference>
											<el-button
												class="tree_btn"
												type="primary"
												size="mini"
												icon="el-icon-circle-plus-outline"
											></el-button>
										</template>
										<div class="popover_content">
											<h6 class="popover_content__title">请确认需要添加的内容</h6>
											<div class="popover_content__actions">
												<el-button
													class="tree_btn"
													type="primary"
													size="mini"
													@click="showGroupFormDialog(node)"
												>
													机构/部门
												</el-button>
												<el-button
													class="tree_btn"
													type="primary"
													size="mini"
													@click="showRoleFormDialog(node)"
												>
													角色/岗位
												</el-button>
											</div>
										</div>
									</el-popover>
									<el-button
										type="warning"
										class="tree_btn"
										size="mini"
										icon="el-icon-edit"
										@click.stop="showChangeDialogByType(node)"
									></el-button>

									<el-popconfirm
										title="下属组织也会一并删除!"
										confirmButtonText="我已知晓确认删除"
										cancelButtonText="取消"
										@confirm="deleteTreeNodeSubmit(node)"
									>
										<template #reference>
											<el-button
												type="danger"
												class="tree_btn"
												size="mini"
												icon="el-icon-delete"
											></el-button>
										</template>
									</el-popconfirm>
								</span>
							</span>
						</template>
					</el-tree>
				</el-scrollbar>
				<div v-else class="tree_no_data">
					<el-button type="primary" @click.stop="isShowGroupFormDialog = true">新增组织</el-button>
				</div>
			</el-col>
			<el-col :span="19" class="el_col gr_detail">
				<!-- <el-scrollbar> -->
				<el-tabs v-model="tabActiveName" :before-leave="tabChangeHandle" v-if="tabSelectNode">
					<el-tab-pane label="权限管理" name="permission">
						<div class="permissions_container">
							<div class="permissions_actions">
								<el-button type="primary" size="mini" @click="setAllPermissionStatus(true)"
									>全选</el-button
								>
								<el-button type="warning" size="mini" @click="reverseSelectedAllPermission"
									>反选</el-button
								>
								<el-button type="warning" size="mini" @click="setAllPermissionStatus(false)"
									>取消选中</el-button
								>
							</div>
							<div class="permissions_checkboxs">
								<el-scrollbar>
									<div v-for="(value, key, index) in permissions" :key="index">
										<el-divider content-position="left">{{ value.label }}</el-divider>
										<el-checkbox
											size="mini"
											:disabled="c_value.disabled"
											v-model="permissions[key]['permissions'][c_key].has"
											:label="c_value.label"
											v-for="(c_value, c_key, c_index) in value.permissions"
											:key="c_index"
											border
										></el-checkbox>
									</div>
								</el-scrollbar>
							</div>
							<div class="permissions_submit">
								<el-button type="primary" @click="permissionSubmit">提交</el-button>
							</div>
						</div>
					</el-tab-pane>
					<el-tab-pane label="人员聘用" name="employ" :disabled="!tabSelectNode.data.is_role">
						<div class="employ_search_form">
							<el-form :inline="true" :model="searchData.formData" ref="SearchForm">
								<el-form-item label="昵称">
									<el-input
										v-model="searchData.formData.nickname"
										size="mini"
										placeholder="按昵称模糊查询"
									></el-input>
								</el-form-item>
								<el-form-item label="账号">
									<el-input
										v-model="searchData.formData.account"
										size="mini"
										placeholder="按账号模糊查询"
									></el-input>
								</el-form-item>
								<el-form-item>
									<el-button type="primary" size="small" @click="searchSubmit()">查询</el-button>
									<el-button size="small" @click="clearSearchForm()">重置</el-button>
								</el-form-item>
							</el-form>
						</div>
						<div class="employ_action">
							<el-button type="primary" size="mini" @click="showEmployFormDialog">聘用人员</el-button>
						</div>
						<div class="employ_table_container">
							<el-table
								:data="recordData.results"
								empty-text="该职位尚未聘任人员到岗"
								border
								:height="tableHeight"
								ref="recordTable"
								v-tableAutoHeight:[tableHeight]="160"
								:key="reloadKey"
							>
								<el-table-column label="选择框" type="selection" fixed></el-table-column>
								<el-table-column
									label="序号"
									type="index"
									width="50"
									fixed
									align="center"
								></el-table-column>
								<el-table-column prop="account" label="账号"> </el-table-column>
								<el-table-column prop="nickname" label="昵称"> </el-table-column>
								<el-table-column label="岗位">
									<template #default>
										{{ tabSelectNode.data.label }}
									</template>
								</el-table-column>
								<el-table-column label="操作" width="150" fixed="right" align="center">
									<template #default="scope">
										<el-button
											size="mini"
											type="warning"
											@click="unemlpoy(scope.$index, scope.row.account)"
										>
											解除聘用
										</el-button>
									</template>
								</el-table-column>
							</el-table>
						</div>
						<div>
							<el-pagination
								@size-change="searchSubmit()"
								@current-change="searchSubmit()"
								background
								layout="prev, pager, next, sizes, jumper"
								:total="recordData.count"
								v-model:pageSize="recordData.page_size"
								v-model:currentPage="recordData.page"
								:hide-on-single-page="false"
							>
							</el-pagination>
						</div>
					</el-tab-pane>
				</el-tabs>
				<el-divider v-else><h3>请先在左侧组织结构树形图中选中组织或角色</h3></el-divider>
				<!-- </el-scrollbar> -->
			</el-col>
		</el-row>

		<!-- 组织机构添加弹窗 -->
		<el-dialog
			:title="dialogTitle('部门/组织')"
			v-model="isShowGroupFormDialog"
			:before-close="closeAddGroupDialog"
			destroy-on-close
			width="30%"
		>
			<el-form ref="groupForm" :model="groupForm" label-width="80px">
				<el-form-item label="组织名">
					<el-input v-model="groupForm.name" @input="groupCodeTranslationChinases"></el-input>
				</el-form-item>
				<el-form-item label="组织代码">
					<el-input v-model="groupForm.code"></el-input>
				</el-form-item>
				<el-form-item label="上级机构">
					<el-select v-model="groupForm.parent" placeholder="请选择上级组织机构">
						<el-option
							:label="item.name"
							v-for="(item, index) in allGroups"
							:key="index"
							:value="item.id"
						></el-option>
					</el-select>
				</el-form-item>
			</el-form>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="closeAddGroupDialog">取 消</el-button>
					<el-button v-if="formTypeStatus" type="primary" @click="addGroupSubmit">提 交</el-button>
					<el-button v-else type="primary" @click="changeGroupSubmit">提交修改</el-button>
				</span>
			</template>
		</el-dialog>
		<!-- 角色添加弹窗 -->
		<el-dialog
			:title="dialogTitle('角色/岗位')"
			v-model="isShowRoleFormDialog"
			:before-close="closeAddRoleDialog"
			destroy-on-close
			width="30%"
		>
			<el-form ref="roleForm" :model="roleForm" label-width="80px">
				<el-form-item label="组织名">
					<el-input v-model="roleForm.name" @input="roleCodeTranslationChinases"></el-input>
				</el-form-item>
				<el-form-item label="组织代码">
					<el-input v-model="roleForm.code"></el-input>
				</el-form-item>
				<el-form-item label="上级机构">
					<el-select v-model="roleForm.parent" placeholder="请选择上级组织机构">
						<el-option
							:label="item.name"
							v-for="(item, index) in allGroups"
							:key="index"
							:value="item.id"
						></el-option>
					</el-select>
				</el-form-item>
			</el-form>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="closeAddRoleDialog">取 消</el-button>
					<el-button v-if="formTypeStatus" type="primary" @click="addRoleSubmit">提 交</el-button>
					<el-button v-else type="primary" @click="changeRoleSubmit">提交修改</el-button>
				</span>
			</template>
		</el-dialog>
		<el-dialog
			title="聘用人员"
			v-model="isShowEmployFormDialog"
			:before-close="closeEmployFormDialog"
			destroy-on-close
			width="30%"
		>
			<el-form ref="roleForm" :model="roleForm" label-width="80px">
				<el-form-item label="任职岗位">
					<el-select v-model="employForm.role_id" placeholder="请选择岗位" style="min-width: 25rem">
						<el-option
							:label="item.name"
							v-for="(item, index) in allRoles"
							:key="index"
							:value="item.id"
						></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="人员">
					<el-select
						v-model="employForm.user_id"
						placeholder="请输入账号，姓名或手机号进行查询"
						style="min-width: 25rem"
						filterable
						remote
						:remote-method="userSearch"
					>
						<el-option
							:label="item.value+ '---' + item.account"
							v-for="(item, index) in employeeList"
							:key="index"
							:value="item.key"
						></el-option>
					</el-select>
				</el-form-item>
			</el-form>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="closeEmployFormDialog">取 消</el-button>
					<el-button type="primary" @click="employSubmit">提交聘任</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>
<script>
import { list, remove, patch } from '../../apis/curd'
import {
	employUserToRole,
	searchUser,
	dismissUserToRole,
	getPermissionList,
	permissionSubmit,
	groupList,
	createGroup,
	updateGroup,
	deleteGroup,
	roleList,
	createRole,
	updateRole,
	deleteRole,
	getSideTreeData,
} from '@/apis/GroupRoleManage'
import { ElMessage } from 'element-plus'
import { datetimeFormat } from '@/utils/tools'

var pinyin = require('pinyin')
export default {
	name: 'GroupRoleManageView',
	data() {
		return {
			// 树形图数据
			treeData: [],
			groupForm: {
				id: null,
				parent: null,
				name: null,
				code: null,
			},
			roleForm: {
				id: null,
				parent: null,
				name: null,
				code: null,
			},
			searchData: {
				formData: {
					code: null,
					name: null,
				},
				source: {},
			}, // 搜索工具栏数据
			employForm: {
				user_id: null,
				role_id: null,
			},
			// 待聘任的用戶列表 用於聘任時的用户下拉框
			employeeList: [],
			// 全部组织机构的平铺列表 用于组织机构下拉框
			allGroups: null,
			allRoles: null,
			// 组织 和 角色 模态框的状态
			isShowGroupFormDialog: false,
			isShowRoleFormDialog: false,
			isShowEmployFormDialog: false,
			// 角色和组织的模态框类型状态 True添加 False修改
			formTypeStatus: true,
			// 添加或修改时，选中的节点 包含具体数据
			formSelectNode: null,
			// 单击节点时选中的节点 用于tabs
			tabSelectNode: null,
			// tab选中的name
			tabActiveName: 'permission',
			// 已聘任的数据信息 分页在此
			recordData: { page: 0, page_size: 20, count: 0, results: [] },
			permissions: {},
			tableHeight: 100,
			reloadKey: 1,
		}
	},
	mounted() {
		// 初始化
		this.getGruopRoleTree()
		this.getGroups()
		this.getRoles()
	},
	methods: {
		// 提交聘任
		employSubmit() {
			employUserToRole(this.employForm).then(res => {
				if (res.status) {
					ElMessage.success({
						message: '聘用成功',
					})
					this.recordData.results.push(res.data)
					this.closeEmployFormDialog()
				}
			})
		},
		userSearch(query) {
			// 人员搜索
			searchUser(query, { showLoading: false }).then(res => {
				if (res.status) {
					this.employeeList = res.data
					console.log(res.data);
				}
			})
		},
		// 打开聘任人员模态框
		showEmployFormDialog() {
			this.isShowEmployFormDialog = true
			this.employForm.role_id = this.tabSelectNode.data.id
		},
		// 关闭聘任人员模态框
		closeEmployFormDialog() {
			this.isShowEmployFormDialog = false
			this.employeeList = []
			this.employForm = {
				user_id: null,
				role_id: null,
			}
		},
		// 自动设置表格的高度
		autoHeightHandle() {
			let el = this.$refs.recordTable.$el
			console.log(this.$refs.recordTable.$el)
			let clientHeight = document.body.clientHeight
			let elOffsetTop = el.offsetTop
			let height_the_left = clientHeight - elOffsetTop
			let elH = height_the_left - 180
			el.style = `height:calc(${elH}px - 2rem);overflow-y:auto;`
			this.tableHeight = elH - 15
			this.reloadKey++
			this.$refs.recordTable.doLayout()
		},
		// 清空搜索框内容
		clearSearchForm() {
			for (let i in this.searchData.formData) {
				this.searchData.formData[i] = null
			}
		},
		// 解聘人员
		unemlpoy(index, account) {
			let pk = this.tabSelectNode.data.id
			dismissUserToRole({ account, pk }).then(res => {
				if (res.status) {
					ElMessage.success({
						message: '解聘成功',
					})
					this.recordData.results.splice(index, 1)
				}
			})
		},
		// 已聘任人员搜索
		searchSubmit() {
			let pk = this.tabSelectNode.data.id
			let url = `auth/role_employ_user_list/${pk}`
			let data = { page: this.recordData.page, page_size: this.recordData.page_size }
			console.log(data)
			for (let i in this.searchData.formData) {
				let val = this.searchData.formData[i]
				if (val) {
					data[i] = val
				}
			}
			//  发起请求
			list(url, data)
				.then(res => {
					// 处理成功数据
					this.recordData = res.data
					this.autoHeightHandle()
				})
				.catch(respons => {
					// 处理失败数据
				})
		},

		// 用于得到权限变化内容
		getPermissionChangeData() {
			let delete_perm = []
			let add_perm = []
			for (let classlys in this.permissions) {
				console.log(this.permissions[classlys].permissions)
				for (let permission in this.permissions[classlys].permissions) {
					let element = this.permissions[classlys].permissions[permission]
					if (!element.disabled && element.has !== element.is_original) {
						if (element.has) {
							add_perm.push({ code: permission })
						} else {
							delete_perm.push({ code: permission })
						}
					}
				}
			}
			return { delete_perm, add_perm }
		},
		// 提交权限变化
		permissionSubmit() {
			let pk = this.tabSelectNode.data.id
			let model_type = 'group'
			if (this.tabSelectNode.data.is_role) {
				model_type = 'role'
			}
			let data = { pk, model_type, ...this.getPermissionChangeData() }
			permissionSubmit(data).then(res => {
				if (res.status) {
					ElMessage.success({
						message: '修改成功',
					})
				} else {
					ElMessage.error({
						message: res.message,
					})
				}
			})
		},

		// 点击树形结构图时触发的事件
		nodeClick(data, node, e) {
			this.tabSelectNode = node
			// tab必须先回到权限界面 因为组织机构没有人员
			this.tabActiveName = 'permission'
			let model_type = 'group'
			let pk = data.id
			if (data.is_role) {
				model_type = 'role'
			}
			getPermissionList({ pk, model_type }, false).then(res => {
				if (res.status) {
					this.permissions = res.data
				} else {
					ElMessage.error({
						message: res.message,
					})
				}
			})
		},
		// tabs切换时的钩子函数
		tabChangeHandle(activeName, oldActiveName) {
			if (this.tabSelectNode == null) {
				// 必须存在选择的Node
				return false
			}
			if (activeName == 'permission') {
				return true
			} else {
				if (!this.tabSelectNode.data.is_role) {
					return false
				}
				this.searchSubmit()
				this.autoHeightHandle()
				return true
			}
		},
		// roleForm And groupForm 弹出框的标题函数
		dialogTitle(name) {
			let typeName = this.formTypeStatus ? '新增' : '修改'
			return typeName + name + (this.formSelectNode ? '[' + this.formSelectNode.data.label + ']' : '')
		},
		// 权限管理全选/取消按钮处理方法
		setAllPermissionStatus(status) {
			for (let i in this.permissions) {
				let classlys = this.permissions[i]
				for (let j in classlys.permissions) {
					let permission = classlys.permissions[j]
					if (!permission.disabled) {
						this.permissions[i].permissions[j].has = status
					}
				}
			}
		},
		// 权限管理反选按钮处理方法
		reverseSelectedAllPermission() {
			for (let i in this.permissions) {
				let classlys = this.permissions[i]
				for (let j in classlys.permissions) {
					let permission = classlys.permissions[j]
					if (!permission.disabled) {
						this.permissions[i].permissions[j].has = !permission.has
					}
				}
			}
		},
		// 转换组织机构名为拼音
		groupCodeTranslationChinases(value) {
			let code = pinyin(value, { style: pinyin.STYLE_NORMAL })
			this.groupForm.code = code.join('_')
		},
		// 转换角色名为拼音
		roleCodeTranslationChinases(value) {
			let code = pinyin(value, { style: pinyin.STYLE_NORMAL })
			this.roleForm.code = code.join('_')
		},
		// 修改按钮事件。
		showChangeDialogByType(node) {
			let is_role = node.data.is_role
			if (is_role) {
				this.showRoleFormDialog(node, true)
				this.roleForm.name = node.data.label
				this.roleForm.code = node.data.code
			} else {
				this.showGroupFormDialog(node, true)
				this.groupForm.name = node.data.label
				this.groupForm.code = node.data.code
			}
		},
		// 打开组织机构表单弹框
		showGroupFormDialog(node, change = false) {
			this.isShowGroupFormDialog = true
			this.formSelectNode = node
			this.groupForm.parent = change ? node.data.parent_id : node.data.id
			this.formTypeStatus = !change
		},
		// 关闭组织机构表单弹框并清理数据
		closeAddGroupDialog() {
			this.isShowGroupFormDialog = false
			this.formSelectNode = null
			this.groupForm = {
				id: null,
				parent: null,
				name: null,
				code: null,
			}
		},
		// 打开角色岗位表单弹框
		showRoleFormDialog(node, change = false) {
			this.isShowRoleFormDialog = true
			this.formSelectNode = node
			this.roleForm.parent = change ? node.data.parent_id : node.data.id
			this.formTypeStatus = !change
		},
		// 关闭角色岗位表单弹框并清理数据
		closeAddRoleDialog() {
			this.isShowRoleFormDialog = false
			this.formSelectNode = null
			this.roleForm = {
				id: null,
				parent: null,
				name: null,
				code: null,
			}
		},
		// 提交组织机构添加
		addGroupSubmit() {
			createGroup(this.groupForm).then(res => {
				if (!res.status) {
					ElMessage.error({
						message: res.message,
					})
					return
				}
				ElMessage.success({
					message: '添加成功',
				})
				let nodeData = res.data
				this.allGroups.push(nodeData)
				nodeData['is_role'] = false
				nodeData['children'] = []
				nodeData['label'] = nodeData.name
				delete nodeData.name
				if (this.formSelectNode) {
					this.appendTreeNode(nodeData, this.formSelectNode)
				} else {
					this.treeData = [nodeData]
				}
				this.closeAddGroupDialog()
			})
		},
		// 提交组织机构修改
		changeGroupSubmit() {
			let id = this.formSelectNode.data.id

			updateGroup(id, this.groupForm)
				.then(res => {
					if (res.status) {
						ElMessage.success({
							message: '修改成功',
						})
						let nodeData = res.data
						// 删除旧的并添加新的
						this.updateAllGroupsByRemove(id)
						this.allGroups.push(nodeData)
						// 修正补充node.data 数值
						this.getGruopRoleTree()
						this.closeAddGroupDialog()
					} else {
						ElMessage.error({
							message: res.message,
						})
					}
				})
				.catch(error => {
					console.log(error)
				})
		},
		// 得到组织结构树基础数组
		getGruopRoleTree() {
			getSideTreeData(false).then(res => {
				this.treeData = res.data
			})
		},
		// 组织机构下拉框更新之删除某项
		updateAllGroupsByRemove(id) {
			this.allGroups.forEach((element, index) => {
				if (id === element.id) {
					this.allGroups.splice(index, 1)
				}
			})
		},

		// 提交组织机构删除
		deleteTreeNodeSubmit(node) {
			let id = node.data.id
			if (node.data.is_role) {
				deleteRole(id).then(res => {
					if (!res.status) {
						ElMessage.error({
							message: res.message,
						})
					}
					ElMessage.success({
						message: '删除成功',
					})
					this.removeTreeNode(node.data.id)
				})
			} else {
				deleteGroup(id).then(res => {
					if (!res.status) {
						ElMessage.error({
							message: res.message,
						})
					}
					ElMessage.success({
						message: '删除成功',
					})
					this.removeTreeNode(node.data.id)
					this.updateAllGroupsByRemove(id)
				})
			}
		},
		// 提交角色岗位添加
		addRoleSubmit() {
			createRole(this.roleForm)
				.then(res => {
					if (res.status) {
						ElMessage.success({
							message: '添加成功',
						})
						let nodeData = res.data
						nodeData['is_role'] = true
						nodeData['children'] = []
						nodeData['label'] = nodeData.name
						delete nodeData.name
						this.appendTreeNode(nodeData, this.formSelectNode)
						this.closeAddRoleDialog()
					} else {
						ElMessage.error({
							message: res.message,
						})
					}
				})
				.catch(error => {
					console.log(error)
				})
		},
		// 提交岗位修改
		changeRoleSubmit() {
			let id = this.formSelectNode.data.id
			updateRole(id, this.roleForm).then(res => {
				if (res.status) {
					ElMessage.success({
						message: '修改成功',
					})
					this.getGruopRoleTree()
					this.closeAddRoleDialog()
				} else {
					ElMessage.error({
						message: res.message,
					})
				}
			})
		},
		// 得到组织机构列表
		getGroups() {
			groupList().then(res => {
				this.allGroups = res.data
			})
		},
		getRoles() {
			roleList().then(res => {
				this.allRoles = res.data
			})
		},
		// 在前端删除组织机构下的某个节点
		removeTreeNode(id) {
			this.$refs['GRTree'].remove(id)
		},
		// 在前端添加节点到组织机构下的某个节点
		appendTreeNode(data, parentNode) {
			this.$refs['GRTree'].append(data, parentNode)
		},
		// 拖拽结束时的处理函数
		handleDrop(draggingNode, dropNode, dropType, ev) {
			let parent = null
			// 当拖拽动作是处于 插入 时，存在父级ID
			if (dropType === 'inner') {
				parent = dropNode.data.id
			}
			let id = draggingNode.data.id
			if (draggingNode.data.is_role) {
				updateRole(id, { parent }).then(res => {
					if (res.status) {
						this.getGruopRoleTree()
					} else {
						ElMessage.error({
							message: res.message,
						})
					}
				})
			} else {
				updateGroup(id, { parent }).then(res => {
					if (res.status) {
						this.getGruopRoleTree()
					} else {
						ElMessage.error({
							message: res.message,
						})
					}
				})
			}
		},
		// 判断放置的目标能否放置，列如 role不能处于Top1级别且不能存在下级
		allowDrop(draggingNode, dropNode, type) {
			// 父级不能是角色
			if (dropNode.data.is_role) {
				return false
			}
			if (draggingNode.data.is_role && type !== 'inner') {
				return false
			}
			return true
		},
	},
}
</script>
<style lang='scss' scoped>
:deep(.el-popconfirm__action) {
	text-align: center;
}
.el-tabs {
	height: 100%;
}
:deep(.el-tab-pane) {
	height: calc(100%);
}
:deep(.el-tabs__content) {
	height: calc(100% - 3rem);
}
:deep(.el-tree-node__content) {
	height: auto;
}

.el_row,
.el_col {
	height: 100%;
}
.gr_detail {
	padding: 1rem;
}
.el_col {
	box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.12), 0 0 0px rgba(0, 0, 0, 0.04);
	border-left: 1px solid rgba(0, 0, 0, 0.12);
	background: #fff;
}
.custom-tree-node {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 14px;
	padding-right: 8px;
	// height: 4rem;
}
.custom-tree-node_btns {
	padding: 1px 0;
}
.tree_btn {
	padding-left: 5px;
	padding-right: 5px;
	padding-top: 6px;
	margin-left: 3px !important;
	min-height: 24px;
	height: 24px;
	// line-height: 24px;
}
.tree_no_data {
	margin-top: 2rem;
	text-align: center;
}
.popover_content__title {
	margin: 2px 0;
	text-align: center;
}
.popover_content__actions {
	text-align: center;
	margin-top: 5px;
}
.permissions_container {
	height: 100%;
}
.permissions_actions {
	height: 2rem;
	line-height: 2rem;
}
.permissions_checkboxs {
	height: calc(100% - 5rem);
}
.permissions_submit {
	height: 3rem;
	line-height: 3rem;
	text-align: center;
}
.coutom-tree-node_label {
	overflow-wrap: break-word;
	white-space: break-spaces;
	overflow: hidden;
	max-width: 80%;
}
.employ_table_container {
	background-color: white;
	overflow: hidden;
	height: calc(100% - 7rem);
	margin-bottom: 0.5rem;
}
:deep(.employ_search_form .el-form-item) {
	margin-bottom: 0;
}
.employ_action {
	padding-bottom: 0.2rem;
}
</style>